<template>
    <div class="email-settings-page">
        <van-nav-bar title="Email Settings" left-text="Back" left-arrow @click-left="$router.back()" />

        <div class="settings-content">
            <van-cell-group inset title="Email Notifications">
                <van-cell title="Training Reminders" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.trainingReminders" />
                    </template>
                </van-cell>
                <van-cell title="Achievement Notifications" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.achievements" />
                    </template>
                </van-cell>
                <van-cell title="Community Updates" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.community" />
                    </template>
                </van-cell>
                <van-cell title="Weekly Progress Report" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.weeklyReport" />
                    </template>
                </van-cell>
            </van-cell-group>

            <van-cell-group inset title="Email Frequency">
                <van-cell title="Digest Frequency" is-link @click="showFrequencyPicker = true">
                    <template #value>{{ selectedFrequency }}</template>
                </van-cell>
            </van-cell-group>

            <div class="save-section">
                <van-button type="primary" block @click="saveSettings">
                    Save Settings
                </van-button>
            </div>
        </div>

        <van-popup v-model:show="showFrequencyPicker" position="bottom">
            <van-picker :columns="frequencyOptions" @confirm="onFrequencyConfirm"
                @cancel="showFrequencyPicker = false" />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { showToast } from 'vant'

const settings = reactive({
    trainingReminders: true,
    achievements: true,
    community: false,
    weeklyReport: true
})

const showFrequencyPicker = ref(false)
const selectedFrequency = ref('Daily')

const frequencyOptions = [
    { text: 'Immediately', value: 'immediate' },
    { text: 'Daily', value: 'daily' },
    { text: 'Weekly', value: 'weekly' },
    { text: 'Never', value: 'never' }
]

const onFrequencyConfirm = (value: any) => {
    selectedFrequency.value = value.text
    showFrequencyPicker.value = false
}

const saveSettings = () => {
    showToast('Email settings saved!')
}
</script>

<style lang="scss" scoped>
.email-settings-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.settings-content {
    padding: 16px;
}

.save-section {
    margin-top: 24px;
}
</style>